<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=2.0">
    <title>JH 招聘数据分析仪表板</title>
    
    <!-- 图标字体 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- Chart.js 缩放插件 -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
    
    <!-- SortableJS for drag & drop -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="styles/jh_dashboard.css">
    
    <style>
        /* 确保图表容器在小屏幕上的响应式表现 */
        @media (max-width: 480px) {
            .chart-modal-content {
                width: 98%;
                max-height: 98%;
                min-height: 400px;
            }
            
            .chart-container {
                min-height: 250px;
                max-height: 400px;
                padding: 0.5rem;
            }
            
            .charts-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            .overview-cards {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }
        
        /* 中等屏幕优化 */
        @media (max-width: 768px) and (min-width: 481px) {
            .chart-container {
                min-height: 300px;
                max-height: 450px;
            }
        }
        
        /* 增强图表容器的响应性 */
        .chart-container {
            overflow: visible;
            min-height: 350px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .chart-modal-container {
            overflow: visible;
        }
        
        /* 确保图表canvas能正确适应容器 */
        .chart-container canvas {
            max-width: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            height: auto !important;
        }
        
        /* 修复拖拽时的样式 */
        .chart-card.sortable-ghost {
            opacity: 0.4;
            transform: scale(0.95);
        }
        
        .chart-card.sortable-chosen {
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            z-index: 1000;
        }
    </style>
</head>
<body class="light-theme">
    <!-- 头部导航 -->
    <header class="dashboard-header">
        <div class="header-content">
            <div class="header-left">
                <h1><i class="fas fa-brain"></i> JH 智能求职分析系统</h1>
            </div>
            <div class="header-right">
                <div class="theme-controls">
                    <button class="btn btn-icon" onclick="toggleTheme()" id="themeToggle">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button class="btn btn-icon" onclick="resetLayout()" title="重置布局">
                        <i class="fas fa-undo"></i>
                    </button>
                    <button class="btn btn-icon" onclick="toggleConfigPanel()" title="图表配置">
                        <i class="fas fa-cog"></i>
                    </button>
                </div>
                <div class="user-info">
                    <span id="userWelcome">欢迎, 求职者</span>
                    <button class="btn btn-outline" onclick="goBack()">
                        <i class="fas fa-arrow-left"></i> 返回
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主标签页导航 -->
    <nav class="main-tabs-nav">
        <div class="tabs-container">
            <button class="main-tab active" data-tab="visualization" onclick="switchMainTab('visualization', this)">
                <i class="fas fa-chart-line"></i>
                <span>数据可视化</span>
            </button>
            <button class="main-tab" data-tab="self-analysis" onclick="switchMainTab('self-analysis', this)">
                <i class="fas fa-user-chart"></i>
                <span>自身分析</span>
            </button>
            <button class="main-tab" data-tab="smart-matching" onclick="switchMainTab('smart-matching', this)">
                <i class="fas fa-magic"></i>
                <span>智能匹配</span>
            </button>
            <button class="main-tab" data-tab="interview-strategy" onclick="switchMainTab('interview-strategy', this)">
                <i class="fas fa-lightbulb"></i>
                <span>面试策略</span>
            </button>
            <button class="main-tab" data-tab="ai-assistant" onclick="switchMainTab('ai-assistant', this)">
                <i class="fas fa-robot"></i>
                <span>AI助手</span>
            </button>
        </div>
    </nav>

    <!-- 图表配置面板 -->
    <div class="config-panel" id="configPanel">
        <div class="config-header">
            <h3><i class="fas fa-palette"></i> 图表个性化配置</h3>
            <button class="btn btn-icon" onclick="toggleConfigPanel()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="config-content">
            <div class="config-section">
                <h4>主题设置</h4>
                <div class="theme-options">
                    <button class="theme-btn active" data-theme="light">
                        <i class="fas fa-sun"></i> 浅色主题
                    </button>
                    <button class="theme-btn" data-theme="dark">
                        <i class="fas fa-moon"></i> 深色主题
                    </button>
                    <button class="theme-btn" data-theme="auto">
                        <i class="fas fa-adjust"></i> 自动切换
                    </button>
                </div>
            </div>
            
            <div class="config-section">
                <h4>图表配置</h4>
                <div class="chart-config-list" id="chartConfigList">
                    <!-- 动态生成图表配置项 -->
                </div>
            </div>
            
            <div class="config-section">
                <h4>布局设置</h4>
                <div class="layout-options">
                    <button class="btn btn-sm" onclick="resetLayout()">
                        <i class="fas fa-undo"></i> 重置布局
                    </button>
                    <button class="btn btn-sm" onclick="saveLayout()">
                        <i class="fas fa-save"></i> 保存布局
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <main class="dashboard-main">
        <!-- 数据可视化标签页 -->
        <div class="tab-content active" id="visualization-tab">
            <!-- 数据概览卡片 -->
            <section class="overview-cards">
                <div class="card overview-card">
                    <div class="card-icon">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <div class="card-content">
                        <h3>总职位数</h3>
                        <div class="metric-value" id="totalJobs">加载中...</div>
                        <div class="metric-change">
                            <span class="change-positive">+3.2%</span>
                            较上月
                        </div>
                    </div>
                </div>

                <div class="card overview-card">
                    <div class="card-icon">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="card-content">
                        <h3>公司数量</h3>
                        <div class="metric-value" id="totalCompanies">加载中...</div>
                        <div class="metric-change">
                            <span class="change-positive">+1.8%</span>
                            较上月
                        </div>
                    </div>
                </div>

                <div class="card overview-card">
                    <div class="card-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="card-content">
                        <h3>热门城市</h3>
                        <div class="metric-value" id="topLocation">加载中...</div>
                        <div class="metric-change">
                            最多职位
                        </div>
                    </div>
                </div>

                <div class="card overview-card">
                    <div class="card-icon">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="card-content">
                        <h3>平均薪资</h3>
                        <div class="metric-value" id="avgSalary">加载中...</div>
                        <div class="metric-change">
                            <span class="change-positive">+2.5%</span>
                            较上月
                        </div>
                    </div>
                </div>
            </section>

            <!-- 图表区域 - 可拖拽排序 -->
            <section class="charts-section">
                <div class="charts-grid" id="chartsGrid">
                    <!-- 职位类型分布图 -->
                    <div class="chart-card" data-chart-id="jobTypeChart">
                        <div class="chart-header">
                            <div class="chart-title-row">
                                <h3><i class="fas fa-chart-pie"></i> <span class="chart-title">职位类型分布</span></h3>
                                <button class="btn btn-icon drag-handle" title="拖拽调整位置">
                                    <i class="fas fa-grip-vertical"></i>
                                </button>
                            </div>
                            <div class="chart-controls-row">
                                <div class="chart-selectors">
                                    <div class="chart-type-selector">
                                        <label>图表类型</label>
                                        <select class="chart-type-select" onchange="changeChartType('jobTypeChart', this.value)">
                                            <option value="doughnut" selected>饼图</option>
                                            <option value="bar">柱状图</option>
                                            <option value="radar">雷达图</option>
                                        </select>
                                    </div>
                                    <div class="chart-dimension-selector">
                                        <label>数据维度</label>
                                        <select class="dimension-select" onchange="changeDimension('jobTypeChart', this.value)">
                                            <option value="job_type" selected>按职位类型</option>
                                            <option value="schedule_type">按工作类型</option>
                                            <option value="remote_type">按远程类型</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="chart-actions">
                                    <button class="btn btn-icon expand-btn" onclick="jhDashboard.openChartModal('jobTypeChart')" title="放大查看图表">
                                        <i class="fas fa-search-plus"></i>
                                    </button>
                                    <button class="btn btn-icon" onclick="refreshChart('jobTypeChart')" title="刷新图表">
                                        <i class="fas fa-refresh"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="jobTypeChart"></canvas>
                        </div>
                    </div>

                    <!-- 地区分布图 -->
                    <div class="chart-card" data-chart-id="locationChart">
                        <div class="chart-header">
                            <div class="chart-title-row">
                                <h3><i class="fas fa-globe"></i> <span class="chart-title">地区分布</span></h3>
                                <button class="btn btn-icon drag-handle" title="拖拽调整位置">
                                    <i class="fas fa-grip-vertical"></i>
                                </button>
                            </div>
                            <div class="chart-controls-row">
                                <div class="chart-selectors">
                                    <div class="chart-type-selector">
                                        <label>图表类型</label>
                                        <select class="chart-type-select" onchange="changeChartType('locationChart', this.value)">
                                            <option value="bar" selected>柱状图</option>
                                            <option value="horizontalBar">水平柱状图</option>
                                            <option value="doughnut">饼图</option>
                                        </select>
                                    </div>
                                    <div class="chart-dimension-selector">
                                        <label>数据维度</label>
                                        <select class="dimension-select" onchange="changeDimension('locationChart', this.value)">
                                            <option value="location" selected>按地区</option>
                                            <option value="country">按国家</option>
                                            <option value="city">按城市</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="chart-actions">
                                    <button class="btn btn-icon expand-btn" onclick="jhDashboard.openChartModal('locationChart')" title="放大查看图表">
                                        <i class="fas fa-search-plus"></i>
                                    </button>
                                    <button class="btn btn-icon" onclick="refreshChart('locationChart')" title="刷新图表">
                                        <i class="fas fa-refresh"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="locationChart"></canvas>
                        </div>
                    </div>

                    <!-- 薪资分析图 -->
                    <div class="chart-card" data-chart-id="salaryChart">
                        <div class="chart-header">
                            <div class="chart-title-row">
                                <h3><i class="fas fa-dollar-sign"></i> <span class="chart-title">薪资分析</span></h3>
                                <button class="btn btn-icon drag-handle" title="拖拽调整位置">
                                    <i class="fas fa-grip-vertical"></i>
                                </button>
                            </div>
                            <div class="chart-controls-row">
                                <div class="chart-selectors">
                                    <div class="chart-type-selector">
                                        <label>图表类型</label>
                                        <select class="chart-type-select" onchange="changeChartType('salaryChart', this.value)">
                                            <option value="bar" selected>柱状图</option>
                                            <option value="line">折线图</option>
                                            <option value="horizontalBar">水平柱状图</option>
                                        </select>
                                    </div>
                                    <div class="chart-dimension-selector">
                                        <label>数据维度</label>
                                        <select class="dimension-select" onchange="changeDimension('salaryChart', this.value)">
                                            <option value="salary_range" selected>薪资区间</option>
                                            <option value="avg_by_type">按职位类型</option>
                                            <option value="avg_by_location">按地区</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="chart-actions">
                                    <button class="btn btn-icon expand-btn" onclick="jhDashboard.openChartModal('salaryChart')" title="放大查看图表">
                                        <i class="fas fa-search-plus"></i>
                                    </button>
                                    <button class="btn btn-icon" onclick="refreshChart('salaryChart')" title="刷新图表">
                                        <i class="fas fa-refresh"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="salaryChart"></canvas>
                        </div>
                    </div>

                    <!-- 时间趋势图 -->
                    <div class="chart-card" data-chart-id="timeChart">
                        <div class="chart-header">
                            <div class="chart-title-row">
                                <h3><i class="fas fa-chart-line"></i> <span class="chart-title">时间趋势</span></h3>
                                <button class="btn btn-icon drag-handle" title="拖拽调整位置">
                                    <i class="fas fa-grip-vertical"></i>
                                </button>
                            </div>
                            <div class="chart-controls-row">
                                <div class="chart-selectors">
                                    <div class="chart-type-selector">
                                        <label>图表类型</label>
                                        <select class="chart-type-select" onchange="changeChartType('timeChart', this.value)">
                                            <option value="line" selected>折线图</option>
                                            <option value="bar">柱状图</option>
                                            <option value="area">面积图</option>
                                        </select>
                                    </div>
                                    <div class="chart-dimension-selector">
                                        <label>数据维度</label>
                                        <select class="dimension-select" onchange="changeDimension('timeChart', this.value)">
                                            <option value="daily" selected>按日发布</option>
                                            <option value="weekly">按周发布</option>
                                            <option value="monthly">按月发布</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="chart-actions">
                                    <button class="btn btn-icon expand-btn" onclick="jhDashboard.openChartModal('timeChart')" title="放大查看图表">
                                        <i class="fas fa-search-plus"></i>
                                    </button>
                                    <button class="btn btn-icon" onclick="refreshChart('timeChart')" title="刷新图表">
                                        <i class="fas fa-refresh"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="timeChart"></canvas>
                        </div>
                    </div>

                    <!-- 技能需求图 -->
                    <div class="chart-card" data-chart-id="skillsChart">
                        <div class="chart-header">
                            <div class="chart-title-row">
                                <h3><i class="fas fa-cogs"></i> <span class="chart-title">技能需求</span></h3>
                                <button class="btn btn-icon drag-handle" title="拖拽调整位置">
                                    <i class="fas fa-grip-vertical"></i>
                                </button>
                            </div>
                            <div class="chart-controls-row">
                                <div class="chart-selectors">
                                    <div class="chart-type-selector">
                                        <label>图表类型</label>
                                        <select class="chart-type-select" onchange="changeChartType('skillsChart', this.value)">
                                            <option value="horizontalBar" selected>水平柱状图</option>
                                            <option value="bar">柱状图</option>
                                            <option value="doughnut">饼图</option>
                                        </select>
                                    </div>
                                    <div class="chart-dimension-selector">
                                        <label>数据维度</label>
                                        <select class="dimension-select" onchange="changeDimension('skillsChart', this.value)">
                                            <option value="top_skills" selected>热门技能</option>
                                            <option value="skills_by_type">按职位分类</option>
                                            <option value="emerging_skills">新兴技能</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="chart-actions">
                                    <button class="btn btn-icon expand-btn" onclick="jhDashboard.openChartModal('skillsChart')" title="放大查看图表">
                                        <i class="fas fa-search-plus"></i>
                                    </button>
                                    <button class="btn btn-icon" onclick="refreshChart('skillsChart')" title="刷新图表">
                                        <i class="fas fa-refresh"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="skillsChart"></canvas>
                        </div>
                    </div>

                    <!-- 公司排行榜 -->
                    <div class="chart-card" data-chart-id="companyChart">
                        <div class="chart-header">
                            <div class="chart-title-row">
                                <h3><i class="fas fa-trophy"></i> <span class="chart-title">公司排行</span></h3>
                                <button class="btn btn-icon drag-handle" title="拖拽调整位置">
                                    <i class="fas fa-grip-vertical"></i>
                                </button>
                            </div>
                            <div class="chart-controls-row">
                                <div class="chart-selectors">
                                    <div class="chart-type-selector">
                                        <label>图表类型</label>
                                        <select class="chart-type-select" onchange="changeChartType('companyChart', this.value)">
                                            <option value="bar" selected>柱状图</option>
                                            <option value="horizontalBar">水平柱状图</option>
                                            <option value="doughnut">饼图</option>
                                        </select>
                                    </div>
                                    <div class="chart-dimension-selector">
                                        <label>数据维度</label>
                                        <select class="dimension-select" onchange="changeDimension('companyChart', this.value)">
                                            <option value="job_count" selected>按职位数量</option>
                                            <option value="avg_salary">按平均薪资</option>
                                            <option value="growth_rate">按增长率</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="chart-actions">
                                    <button class="btn btn-icon expand-btn" onclick="jhDashboard.openChartModal('companyChart')" title="放大查看图表">
                                        <i class="fas fa-search-plus"></i>
                                    </button>
                                    <button class="btn btn-icon" onclick="refreshChart('companyChart')" title="刷新图表">
                                        <i class="fas fa-refresh"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="companyChart"></canvas>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 职位详细信息 - 增强版 -->
            <section class="data-table-section">
                <div class="table-card">
                    <div class="table-header">
                        <h3><i class="fas fa-table"></i> 职位详细信息</h3>
                        <div class="table-controls">
                            <!-- 搜索框移到筛选器外面 -->
                            <div class="search-section">
                                <div class="search-input-wrapper">
                                    <input type="text" id="searchInput" placeholder="Search jobs, companies, skills..." onkeyup="jhDashboard.searchJobs()">
                                    <button class="search-btn" onclick="jhDashboard.searchJobs()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 筛选器切换按钮区域 -->
                            <div class="filter-toggle-section">
                                <button class="filter-toggle-btn" onclick="jhDashboard.toggleFilters()" id="filterToggleBtn">
                                    <i class="fas fa-filter"></i>
                                    <span>筛选器</span>
                                    <span class="filter-count" id="filterCount">0</span>
                                    <i class="fas fa-chevron-down toggle-icon"></i>
                                </button>
                                
                                <!-- 删除快速显示已激活的筛选器区域 -->
                            </div>
                            
                            <!-- 筛选器面板 - 标签页式设计 -->
                            <div class="filters-panel" id="filtersPanel" style="display: none;">
                                <div class="filters-container">
                                    <!-- 筛选器标签页导航 -->
                                    <div class="filter-tabs">
                                        <button class="filter-tab active" data-tab="basic" onclick="jhDashboard.switchFilterTab('basic', this)">
                                            <i class="fas fa-filter"></i> 基础筛选
                                        </button>
                                        <button class="filter-tab" data-tab="location" onclick="jhDashboard.switchFilterTab('location', this)">
                                            <i class="fas fa-globe"></i> 地点&远程
                                        </button>
                                        <button class="filter-tab" data-tab="salary" onclick="jhDashboard.switchFilterTab('salary', this)">
                                            <i class="fas fa-dollar-sign"></i> 薪资范围
                                        </button>
                                    </div>

                                    <!-- 基础筛选标签页 -->
                                    <div class="filter-tab-content active" id="basicTab">
                                        <!-- Job Types -->
                                        <div class="filter-section">
                                            <h4 class="filter-section-title">
                                                <i class="fas fa-briefcase"></i>
                                                职位类型
                                            </h4>
                                            <div class="tag-filter-group" id="jobTypeFilters">
                                                <button class="filter-tag active" data-value="" onclick="jhDashboard.selectFilter('jobType', '', this)">
                                                    <i class="fas fa-list"></i> 全部类型
                                                </button>
                                                <button class="filter-tag" data-value="Data Scientist" onclick="jhDashboard.selectFilter('jobType', 'Data Scientist', this)">
                                                    <i class="fas fa-chart-line"></i> Data Scientist
                                                </button>
                                                <button class="filter-tag" data-value="Data Engineer" onclick="jhDashboard.selectFilter('jobType', 'Data Engineer', this)">
                                                    <i class="fas fa-database"></i> Data Engineer
                                                </button>
                                                <button class="filter-tag" data-value="Data Analyst" onclick="jhDashboard.selectFilter('jobType', 'Data Analyst', this)">
                                                    <i class="fas fa-chart-bar"></i> Data Analyst
                                                </button>
                                                <button class="filter-tag" data-value="Software Engineer" onclick="jhDashboard.selectFilter('jobType', 'Software Engineer', this)">
                                                    <i class="fas fa-code"></i> Software Engineer
                                                </button>
                                                <button class="filter-tag" data-value="Machine Learning Engineer" onclick="jhDashboard.selectFilter('jobType', 'Machine Learning Engineer', this)">
                                                    <i class="fas fa-brain"></i> Machine Learning Engineer
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Schedule Types -->
                                        <div class="filter-section">
                                            <h4 class="filter-section-title">
                                                <i class="fas fa-clock"></i>
                                                工作类型
                                            </h4>
                                            <div class="tag-filter-group" id="scheduleFilters">
                                                <button class="filter-tag active" data-value="" onclick="jhDashboard.selectFilter('schedule', '', this)">
                                                    <i class="fas fa-calendar"></i> 全部类型
                                                </button>
                                                <button class="filter-tag" data-value="Full-time" onclick="jhDashboard.selectFilter('schedule', 'Full-time', this)">
                                                    <i class="fas fa-clock"></i> Full-time
                                                </button>
                                                <button class="filter-tag" data-value="Part-time" onclick="jhDashboard.selectFilter('schedule', 'Part-time', this)">
                                                    <i class="fas fa-clock-o"></i> Part-time
                                                </button>
                                                <button class="filter-tag" data-value="Contractor" onclick="jhDashboard.selectFilter('schedule', 'Contractor', this)">
                                                    <i class="fas fa-handshake"></i> Contractor
                                                </button>
                                                <button class="filter-tag" data-value="Internship" onclick="jhDashboard.selectFilter('schedule', 'Internship', this)">
                                                    <i class="fas fa-graduation-cap"></i> Internship
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 地点&远程标签页 -->
                                    <div class="filter-tab-content" id="locationTab">
                                        <!-- Countries -->
                                        <div class="filter-section">
                                            <h4 class="filter-section-title">
                                                <i class="fas fa-globe"></i>
                                                工作地点
                                            </h4>
                                            <div class="tag-filter-group" id="countryFilters">
                                                <button class="filter-tag active" data-value="" onclick="jhDashboard.selectFilter('country', '', this)">
                                                    <i class="fas fa-globe-americas"></i> 全部地区
                                                </button>
                                                <button class="filter-tag" data-value="United States" onclick="jhDashboard.selectFilter('country', 'United States', this)">
                                                    <i class="fas fa-flag-usa"></i> United States
                                                </button>
                                                <button class="filter-tag" data-value="Germany" onclick="jhDashboard.selectFilter('country', 'Germany', this)">
                                                    <i class="fas fa-beer"></i> Germany
                                                </button>
                                                <button class="filter-tag" data-value="Canada" onclick="jhDashboard.selectFilter('country', 'Canada', this)">
                                                    <i class="fas fa-maple-leaf"></i> Canada
                                                </button>
                                                <button class="filter-tag" data-value="United Kingdom" onclick="jhDashboard.selectFilter('country', 'United Kingdom', this)">
                                                    <i class="fas fa-crown"></i> United Kingdom
                                                </button>
                                                <button class="filter-tag" data-value="Australia" onclick="jhDashboard.selectFilter('country', 'Australia', this)">
                                                    <i class="fas fa-kiwi-bird"></i> Australia
                                                </button>
                                                <button class="filter-tag" data-value="Netherlands" onclick="jhDashboard.selectFilter('country', 'Netherlands', this)">
                                                    <i class="fas fa-tulip"></i> Netherlands
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Remote Work -->
                                        <div class="filter-section">
                                            <h4 class="filter-section-title">
                                                <i class="fas fa-home"></i>
                                                远程工作
                                            </h4>
                                            <div class="tag-filter-group" id="remoteFilters">
                                                <button class="filter-tag active" data-value="" onclick="jhDashboard.selectFilter('remote', '', this)">
                                                    <i class="fas fa-question-circle"></i> 全部选项
                                                </button>
                                                <button class="filter-tag" data-value="true" onclick="jhDashboard.selectFilter('remote', 'true', this)">
                                                    <i class="fas fa-home"></i> Remote (true)
                                                </button>
                                                <button class="filter-tag" data-value="false" onclick="jhDashboard.selectFilter('remote', 'false', this)">
                                                    <i class="fas fa-building"></i> On-site (false)
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 薪资范围标签页 -->
                                    <div class="filter-tab-content" id="salaryTab">
                                        <!-- Salary Range -->
                                        <div class="filter-section">
                                            <h4 class="filter-section-title">
                                                <i class="fas fa-dollar-sign"></i>
                                                薪资范围设置
                                            </h4>
                                            <div class="advanced-filters">
                                                <div class="filter-input-group">
                                                    <div class="salary-range-inputs">
                                                        <input type="number" id="salaryMin" placeholder="最低薪资 ($)" onchange="jhDashboard.applyTableFilters()">
                                                        <span class="range-separator">至</span>
                                                        <input type="number" id="salaryMax" placeholder="最高薪资 ($)" onchange="jhDashboard.applyTableFilters()">
                                                    </div>
                                                </div>
                                                <div class="salary-range-hints">
                                                    <small class="text-muted">
                                                        <i class="fas fa-info-circle"></i>
                                                        设置薪资范围来筛选符合期望的职位
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="filter-actions">
                                        <button class="btn btn-secondary" onclick="jhDashboard.resetTableFilters()">
                                            <i class="fas fa-refresh"></i> 清除所有筛选
                                        </button>
                                        <button class="btn btn-primary" onclick="jhDashboard.exportData()">
                                            <i class="fas fa-download"></i> 导出数据
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-container">
                        <table id="jobsTable" class="data-table">
                            <thead>
                                <tr>
                                    <th onclick="sortTable(0)">职位名称 <i class="fas fa-sort"></i></th>
                                    <th onclick="sortTable(1)">公司 <i class="fas fa-sort"></i></th>
                                    <th onclick="sortTable(2)">地点 <i class="fas fa-sort"></i></th>
                                    <th onclick="sortTable(3)">类型 <i class="fas fa-sort"></i></th>
                                    <th onclick="sortTable(4)">薪资 <i class="fas fa-sort"></i></th>
                                    <th onclick="sortTable(5)">发布日期 <i class="fas fa-sort"></i></th>
                                    <th onclick="sortTable(6)">技能要求 <i class="fas fa-sort"></i></th>
                                    <th onclick="sortTable(7)">远程 <i class="fas fa-sort"></i></th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="jobsTableBody">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="pagination-enhanced">
                        <div class="pagination-info">
                            <span>每页显示:</span>
                            <select id="pageSizeSelect" onchange="changePageSize(this.value)">
                                <option value="20">20条</option>
                                <option value="33" selected>33条</option>
                                <option value="50">50条</option>
                                <option value="100">100条</option>
                            </select>
                            <span class="total-info">
                                共 <span id="totalJobs">0</span> 条数据，
                                第 <span id="currentPage">1</span> 页，共 <span id="totalPages">1</span> 页
                            </span>
                        </div>
                        <div class="pagination-controls">
                            <button class="btn btn-sm" onclick="firstPage()" id="firstBtn">
                                <i class="fas fa-angle-double-left"></i>
                            </button>
                            <button class="btn btn-sm" onclick="previousPage()" id="prevBtn">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <div class="page-numbers" id="pageNumbers">
                                <!-- 动态生成页码 -->
                            </div>
                            <button class="btn btn-sm" onclick="nextPage()" id="nextBtn">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                            <button class="btn btn-sm" onclick="lastPage()" id="lastBtn">
                                <i class="fas fa-angle-double-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- 自身分析标签页 -->
        <div class="tab-content" id="self-analysis-tab">
            <div class="feature-container">
                <div class="feature-header">
                    <h2><i class="fas fa-user-chart"></i> 个人职业画像分析</h2>
                    <p>深度分析您的技能匹配度、竞争力和职业发展方向</p>
                </div>

                <!-- 分析方式选择 -->
                <div class="analysis-method-selector">
                    <div class="method-tabs">
                        <button class="method-tab active" data-method="upload" onclick="switchAnalysisMethod('upload', this)">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>上传简历</span>
                        </button>
                        <button class="method-tab" data-method="manual" onclick="switchAnalysisMethod('manual', this)">
                            <i class="fas fa-edit"></i>
                            <span>手动填写</span>
                        </button>
                    </div>
                </div>

                <!-- 上传方式 -->
                <div class="analysis-method-content active" id="upload-method">
                    <div class="upload-section">
                        <div class="upload-card">
                            <div class="upload-header">
                                <h3><i class="fas fa-cloud-upload-alt"></i> 上传简历文件</h3>
                                <p>支持 PDF、DOC、DOCX、HTML 格式文件</p>
                            </div>
                            <div class="upload-area" id="resumeUpload">
                                <div class="upload-icon">
                                    <i class="fas fa-file-upload"></i>
                                </div>
                                <div class="upload-text">
                                    <p class="upload-title">将文件拖拽到此处，或点击选择文件</p>
                                    <p class="upload-subtitle">支持 PDF、DOC、DOCX、HTML 格式，文件大小不超过 10MB</p>
                                </div>
                                <input type="file" id="resumeFile" accept=".pdf,.doc,.docx,.html,.htm" style="display: none;">
                            </div>
                            <div class="upload-progress" id="uploadProgress" style="display: none;">
                                <div class="progress-bar">
                                    <div class="progress" id="uploadProgressBar"></div>
                                </div>
                                <span class="progress-text" id="uploadProgressText">上传中...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 手动填写方式 -->
                <div class="analysis-method-content" id="manual-method">
                    <div class="manual-form-section">
                        <form id="manualResumeForm" class="manual-resume-form">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="userName"><i class="fas fa-user"></i> 姓名 *</label>
                                    <input type="text" id="userName" name="name" required placeholder="请输入您的姓名">
                                </div>
                                <div class="form-group">
                                    <label for="userEmail"><i class="fas fa-envelope"></i> 邮箱</label>
                                    <input type="email" id="userEmail" name="email" placeholder="your.email@example.com">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group">
                                    <label for="userPhone"><i class="fas fa-phone"></i> 电话</label>
                                    <input type="tel" id="userPhone" name="phone" placeholder="请输入联系电话">
                                </div>
                                <div class="form-group">
                                    <label for="targetPosition"><i class="fas fa-bullseye"></i> 目标职位</label>
                                    <input type="text" id="targetPosition" name="target_position" placeholder="如：数据科学家、软件工程师等">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="userEducation"><i class="fas fa-graduation-cap"></i> 教育背景</label>
                                <textarea id="userEducation" name="education" rows="3" placeholder="请描述您的教育背景，如：本科/硕士学历、专业、毕业院校等"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="userExperience"><i class="fas fa-briefcase"></i> 工作经验</label>
                                <textarea id="userExperience" name="experience" rows="4" placeholder="请描述您的工作经验，包括公司、职位、主要职责和成就等"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="userSkills"><i class="fas fa-cogs"></i> 技能清单</label>
                                <div class="skills-input-area">
                                    <input type="text" id="skillInput" placeholder="输入技能后按回车添加，如：Python、机器学习、数据分析等">
                                    <div class="skills-tags" id="skillsTags">
                                        <!-- 技能标签将在这里显示 -->
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="userSummary"><i class="fas fa-file-alt"></i> 个人简介</label>
                                <textarea id="userSummary" name="summary" rows="3" placeholder="请简要介绍自己的职业背景、特长和职业目标"></textarea>
                            </div>

                            <div class="form-row">
                                <div class="form-group">
                                    <label for="expectedSalary"><i class="fas fa-dollar-sign"></i> 期望薪资</label>
                                    <input type="text" id="expectedSalary" name="expected_salary" placeholder="如：80-120K、面议等">
                                </div>
                            </div>

                            <div class="form-actions">
                                <button type="button" class="btn btn-secondary" onclick="clearManualForm()">
                                    <i class="fas fa-undo"></i> 清空重填
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> 开始分析
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 分析结果区域 -->
                <div class="analysis-results-section" id="analysisResults" style="display: none;">
                    <div class="results-header">
                        <h3><i class="fas fa-chart-line"></i> 分析结果</h3>
                        <button class="btn btn-outline" onclick="resetAnalysis()">
                            <i class="fas fa-redo"></i> 重新分析
                        </button>
                    </div>

                    <div class="analysis-grid">
                        <!-- 技能匹配度分析 -->
                        <div class="analysis-card">
                            <div class="card-header">
                                <h3><i class="fas fa-crosshairs"></i> 技能匹配度</h3>
                            </div>
                            <div class="card-content">
                                <div class="skill-analysis-results" id="skillAnalysisResults">
                                    <!-- 技能分析结果将在这里显示 -->
                                </div>
                            </div>
                        </div>

                        <!-- 能力雷达图 -->
                        <div class="analysis-card">
                            <div class="card-header">
                                <h3><i class="fas fa-bullseye"></i> 能力雷达图</h3>
                            </div>
                            <div class="card-content">
                                <div id="capabilityRadarContainer">
                                    <canvas id="capabilityRadarChart"></canvas>
                                </div>
                            </div>
                        </div>

                        <!-- 匹配度分解 -->
                        <div class="analysis-card">
                            <div class="card-header">
                                <h3><i class="fas fa-sliders-h"></i> 匹配度分解</h3>
                            </div>
                            <div class="card-content">
                                <div class="mini-chart" id="matchBreakdown" style="height:220px"></div>
                            </div>
                        </div>



                        <!-- 竞争力评估 -->
                        <div class="analysis-card">
                            <div class="card-header">
                                <h3><i class="fas fa-trophy"></i> 竞争力评估</h3>
                            </div>
                            <div class="card-content">
                                <div class="competitiveness-metrics">
                                    <div class="metric-item">
                                        <h4>整体竞争力</h4>
                                        <div class="progress-bar">
                                            <div class="progress" id="overallCompetitiveness" style="width: 0%"></div>
                                        </div>
                                        <span class="metric-value" id="overallScore">--</span>
                                    </div>
                                    <div class="metric-item">
                                        <h4>技能匹配度</h4>
                                        <div class="progress-bar">
                                            <div class="progress" id="skillMatchProgress" style="width: 0%"></div>
                                        </div>
                                        <span class="metric-value" id="skillMatchScore">--</span>
                                    </div>
                                    <div class="metric-item">
                                        <h4>薪资竞争力</h4>
                                        <div class="progress-bar">
                                            <div class="progress" id="salaryCompetitiveness" style="width: 0%"></div>
                                        </div>
                                        <span class="metric-value" id="salaryScore">--</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 推荐职位 -->
                        <div class="analysis-card">
                            <div class="card-header">
                                <h3><i class="fas fa-star"></i> 推荐职位</h3>
                            </div>
                            <div class="card-content">
                                <div class="recommended-positions" id="recommendedPositions">
                                    <!-- 推荐职位将在这里显示 -->
                                </div>
                            </div>
                        </div>

                        <!-- 技能提升建议 -->
                        <div class="analysis-card">
                            <div class="card-header">
                                <h3><i class="fas fa-lightbulb"></i> 技能提升建议</h3>
                            </div>
                            <div class="card-content">
                                <div class="skill-suggestions" id="skillSuggestions">
                                    <!-- 技能建议将在这里显示 -->
                                </div>
                            </div>
                        </div>

                        <!-- 职业发展建议 -->
                        <div class="analysis-card full-width">
                            <div class="card-header">
                                <h3><i class="fas fa-route"></i> 职业发展建议</h3>
                            </div>
                            <div class="card-content">
                                <div class="career-suggestions" id="careerSuggestions">
                                    <!-- 职业发展建议将在这里显示 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 智能匹配标签页 -->
        <div class="tab-content" id="smart-matching-tab">
            <div class="feature-container">
                <div class="feature-header">
                    <h2><i class="fas fa-magic"></i> 智能职位匹配</h2>
                    <p>基于您的技能和偏好，为您推荐最合适的职位机会</p>
                </div>

                <div class="matching-section">
                    <div class="matching-controls">
                        <div class="preference-settings">
                            <h3>设置求职偏好</h3>
                            <div class="preference-grid">
                                <div class="preference-item">
                                    <label>期望职位类型</label>
                                    <select id="preferredJobType">
                                        <option value="">请选择</option>
                                        <option value="Data Scientist">数据科学家</option>
                                        <option value="Data Engineer">数据工程师</option>
                                        <option value="Data Analyst">数据分析师</option>
                                        <option value="Software Engineer">软件工程师</option>
                                        <option value="Machine Learning Engineer">机器学习工程师</option>
                                    </select>
                                </div>
                                <div class="preference-item">
                                    <label>期望工作地点</label>
                                    <select id="preferredLocation">
                                        <option value="">不限</option>
                                        <option value="United States">美国</option>
                                        <option value="Canada">加拿大</option>
                                        <option value="Germany">德国</option>
                                        <option value="United Kingdom">英国</option>
                                    </select>
                                </div>
                                <div class="preference-item">
                                    <label>期望薪资范围</label>
                                    <div class="salary-range">
                                        <input type="number" id="expectedSalaryMin" placeholder="最低">
                                        <span>-</span>
                                        <input type="number" id="expectedSalaryMax" placeholder="最高">
                                    </div>
                                </div>
                                <div class="preference-item">
                                    <label>远程工作偏好</label>
                                    <select id="remotePreference">
                                        <option value="">不限</option>
                                        <option value="true">远程工作</option>
                                        <option value="false">现场工作</option>
                                    </select>
                                </div>
                            </div>
                            <button class="btn btn-primary" id="startMatching">
                                <i class="fas fa-search"></i> 开始智能匹配
                            </button>
                        </div>
                    </div>

                    <div class="matching-results" id="matchingResults" style="display: none;">
                        <h3>为您推荐的职位</h3>
                        <div class="job-recommendations" id="jobRecommendations">
                            <!-- 推荐结果将在这里显示 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 面试策略标签页 -->
        <div class="tab-content" id="interview-strategy-tab">
            <div class="feature-container">
                <div class="feature-header">
                    <h2><i class="fas fa-lightbulb"></i> 面试策略生成</h2>
                    <p>根据目标职位生成个性化的面试准备方案</p>
                </div>

                <div class="strategy-section">
                    <div class="strategy-input">
                        <div class="input-group">
                            <label>选择目标职位</label>
                            <select id="targetPosition">
                                <option value="">请选择职位</option>
                                <option value="Data Scientist">数据科学家</option>
                                <option value="Data Engineer">数据工程师</option>
                                <option value="Data Analyst">数据分析师</option>
                                <option value="Software Engineer">软件工程师</option>
                                <option value="Machine Learning Engineer">机器学习工程师</option>
                            </select>
                        </div>
                        <div class="input-group">
                            <label>面试阶段</label>
                            <select id="interviewStage">
                                <option value="initial">初轮面试</option>
                                <option value="technical">技术面试</option>
                                <option value="behavioral">行为面试</option>
                                <option value="final">终面</option>
                            </select>
                        </div>
                        <button class="btn btn-primary" id="generateStrategy">
                            <i class="fas fa-magic"></i> 生成面试策略
                        </button>
                    </div>

                    <div class="strategy-output" id="strategyOutput" style="display: none;">
                        <div class="strategy-tabs">
                            <button class="strategy-tab active" data-tab="questions">
                                <i class="fas fa-question-circle"></i> 常见问题
                            </button>
                            <button class="strategy-tab" data-tab="answers">
                                <i class="fas fa-comments"></i> 参考答案
                            </button>
                            <button class="strategy-tab" data-tab="tips">
                                <i class="fas fa-tips"></i> 面试技巧
                            </button>
                        </div>

                        <div class="strategy-content">
                            <div class="strategy-tab-content active" id="questionsContent">
                                <!-- 常见问题内容 -->
                            </div>
                            <div class="strategy-tab-content" id="answersContent">
                                <!-- 参考答案内容 -->
                            </div>
                            <div class="strategy-tab-content" id="tipsContent">
                                <!-- 面试技巧内容 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI助手标签页 -->
        <div class="tab-content" id="ai-assistant-tab">
            <div class="feature-container">
                <div class="feature-header">
                    <h2><i class="fas fa-robot"></i> AI求职助手</h2>
                    <p>与智能助手对话，获得个性化的求职指导和建议</p>
                </div>

                <div class="chat-interface">
                    <div class="chat-header">
                        <div class="chat-title">
                            <i class="fas fa-robot"></i>
                            <span>AI求职助手</span>
                        </div>
                        <div class="chat-actions">
                            <button class="btn btn-outline btn-sm" onclick="clearChatHistory()" title="清除对话历史">
                                <i class="fas fa-trash"></i>
                            </button>
                            <button class="btn btn-outline btn-sm" onclick="checkAIServiceStatus()" title="检查服务状态">
                                <i class="fas fa-sync"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="chat-container">
                        <div class="chat-messages" id="chatMessages">
                            <div class="message ai-message">
                                <div class="message-avatar">
                                    <i class="fas fa-robot"></i>
                                </div>
                                <div class="message-content">
                                    <p>您好！我是您的AI求职助手。我基于最新的职位数据和市场趋势，可以帮您：</p>
                                    <ul>
                                        <li>📊 分析职位市场趋势和薪资水平</li>
                                        <li>📝 优化简历内容和格式</li>
                                        <li>🎯 准备面试问答和技巧</li>
                                        <li>🚀 制定个性化求职策略</li>
                                        <li>💡 提供职业发展建议</li>
                                    </ul>
                                    <p>请告诉我您想了解什么，我会结合当前的市场数据为您提供专业建议！</p>
                                    <span class="message-time">系统消息</span>
                                </div>
                            </div>
                        </div>

                        <div class="chat-input-area">
                            <div class="quick-questions">
                                <!-- 动态加载的建议问题将显示在这里 -->
                            </div>
                            <div class="chat-input-box">
                                <input type="text" id="chatInput" placeholder="输入您的问题..." onkeypress="handleChatEnter(event)">
                                <button class="btn btn-primary" onclick="sendChatMessage()">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 图表放大模态框 -->
    <div id="chartModal" class="chart-modal">
        <div class="chart-modal-content">
            <div class="chart-modal-header">
                <h3 id="modalChartTitle">
                    <i class="fas fa-chart-bar"></i>
                    图表详情
                </h3>
                <div class="chart-modal-header-controls">
                    <button class="chart-modal-download" id="downloadChart" title="下载图表 (Ctrl+D)">
                        <i class="fas fa-download"></i>
                    </button>
                    <button class="chart-modal-fullscreen" id="toggleFullscreen" title="全屏模式 (Ctrl+F)">
                        <i class="fas fa-expand"></i>
                    </button>
                    <button class="chart-modal-help" id="showHelp" title="快捷键帮助">
                        <i class="fas fa-question-circle"></i>
                    </button>
                    <button class="chart-modal-close" id="closeModal" title="关闭 (ESC)">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="chart-modal-body">
                <div class="chart-modal-toolbar">
                    <div class="toolbar-group">
                        <label>图表类型：</label>
                        <select id="modalChartTypeSelect" class="chart-type-select">
                            <option value="bar">柱状图</option>
                            <option value="horizontalBar">水平柱状图</option>
                            <option value="doughnut">饼图</option>
                            <option value="line">折线图</option>
                            <option value="area">面积图</option>
                            <option value="radar">雷达图</option>
                            <option value="scatter">散点图</option>
                        </select>
                    </div>
                    <div class="toolbar-group">
                        <label>数据维度：</label>
                        <select id="modalDimensionSelect" class="dimension-select">
                            <!-- 动态填充选项 -->
                        </select>
                    </div>
                    <div class="toolbar-group">
                        <label>图表尺寸：</label>
                        <div class="chart-size-controls">
                            <button class="size-preset-btn" data-size="small">小</button>
                            <button class="size-preset-btn active" data-size="medium">中</button>
                            <button class="size-preset-btn" data-size="large">大</button>
                        </div>
                    </div>
                    <div class="toolbar-group">
                        <button class="btn btn-primary" id="modalRefreshBtn">
                            <i class="fas fa-sync-alt"></i> 刷新
                        </button>
                        <button class="btn btn-secondary" id="resetZoomBtn">
                            <i class="fas fa-search-minus"></i> 重置缩放
                        </button>
                        <button class="btn btn-secondary" id="toggleDataView">
                            <i class="fas fa-table"></i> 数据表格
                        </button>
                        <button class="btn btn-secondary" id="exportDataBtn">
                            <i class="fas fa-file-export"></i> 导出数据
                        </button>
                        <button class="btn btn-secondary" id="toggleAIChat">
                            <i class="fas fa-robot"></i> AI分析
                        </button>
                    </div>
                </div>
                
                <!-- 主要内容区域 - 两栏布局 -->
                <div class="chart-modal-content-wrapper" id="chartModalContentWrapper">
                    <!-- 左栏 - 图表区域 -->
                    <div class="chart-modal-left-panel" id="chartModalLeftPanel">
                        <div class="chart-modal-container" id="chartModalContainer">
                            <!-- 加载状态 -->
                            <div class="chart-modal-loading" id="chartModalLoading" style="display: none;">
                                <div class="loading-spinner">
                                    <i class="fas fa-spinner fa-spin"></i>
                                    <p>正在加载图表数据...</p>
                                </div>
                            </div>
                            
                            <!-- 图表区域 -->
                            <canvas id="modalChart"></canvas>
                            
                            <!-- 数据表格视图 -->
                            <div class="chart-data-table" id="chartDataTable">
                                <table id="chartDataTableContent">
                                    <thead>
                                        <tr>
                                            <!-- 动态生成 -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 动态生成 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 可拖拽的分割条 -->
                    <div class="chart-modal-splitter" id="chartModalSplitter">
                        <div class="splitter-handle">
                            <i class="fas fa-grip-lines-vertical"></i>
                        </div>
                    </div>
                    
                    <!-- 右栏 - AI对话区域 -->
                    <div class="chart-modal-right-panel" id="chartModalRightPanel">
                        <div class="ai-chat-panel">
                            <button class="btn btn-icon ai-chat-close-btn" id="closeAIChat" title="隐藏AI面板">
                                <i class="fas fa-times"></i>
                            </button>
                            
                            <div class="ai-chat-content">
                                <div class="ai-chat-messages" id="aiChatMessages">
                                    <div class="ai-chat-welcome">
                                        <div class="welcome-icon">
                                            <i class="fas fa-robot"></i>
                                        </div>
                                        <p class="welcome-text">我可以帮您分析当前图表数据，提供深入的洞察和建议。您可以问我：</p>
                                        <ul class="welcome-suggestions">
                                            <li onclick="selectSuggestion(this)">这个图表数据有什么特点？</li>
                                            <li onclick="selectSuggestion(this)">有哪些异常值需要注意？</li>
                                            <li onclick="selectSuggestion(this)">基于这些数据有什么建议？</li>
                                            <li onclick="selectSuggestion(this)">数据趋势说明了什么？</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="ai-chat-input-area">
                                    <div class="ai-chat-input-wrapper">
                                        <input type="text" 
                                               id="aiChatInput" 
                                               placeholder="询问关于当前图表数据的问题..."
                                               class="ai-chat-input"
                                               onkeypress="handleAIChatEnter(event)">
                                        <button class="btn btn-primary ai-chat-send" onclick="sendAIChatMessage()">
                                            <i class="fas fa-paper-plane"></i>
                                        </button>
                                    </div>
                                    <div class="ai-chat-status" id="aiChatStatus">
                                        <i class="fas fa-circle ai-status-indicator"></i>
                                        <span class="ai-status-text">AI助手已就绪</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 帮助模态框 -->
    <div id="helpModal" class="help-modal">
        <div class="help-modal-content">
            <div class="help-modal-header">
                <h3><i class="fas fa-keyboard"></i> 快捷键帮助</h3>
                <button class="help-modal-close" id="closeHelp">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="help-modal-body">
                <div class="help-section">
                    <h4>图表模态框快捷键</h4>
                    <div class="help-shortcuts">
                        <div class="shortcut-item">
                            <kbd>ESC</kbd>
                            <span>关闭模态框</span>
                        </div>
                        <div class="shortcut-item">
                            <kbd>Ctrl</kbd> + <kbd>F</kbd>
                            <span>切换全屏模式</span>
                        </div>
                        <div class="shortcut-item">
                            <kbd>Ctrl</kbd> + <kbd>D</kbd>
                            <span>下载图表</span>
                        </div>
                        <div class="shortcut-item">
                            <kbd>Ctrl</kbd> + <kbd>T</kbd>
                            <span>切换数据表格视图</span>
                        </div>
                        <div class="shortcut-item">
                            <kbd>Ctrl</kbd> + <kbd>R</kbd>
                            <span>刷新图表</span>
                        </div>
                        <div class="shortcut-item">
                            <kbd>Ctrl</kbd> + <kbd>Z</kbd>
                            <span>重置缩放</span>
                        </div>
                    </div>
                </div>
                <div class="help-section">
                    <h4>全局快捷键</h4>
                    <div class="help-shortcuts">
                        <div class="shortcut-item">
                            <kbd>F5</kbd>
                            <span>刷新所有图表</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 岗位详情模态框 -->
    <div id="jobDetailModal" class="job-detail-modal" style="display: none;">
        <div class="job-detail-modal-content">
            <div class="job-detail-modal-header">
                <h3 id="jobDetailTitle">岗位详情</h3>
                <button class="job-detail-modal-close" onclick="jhDashboard.closeJobDetailModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="job-detail-modal-body" id="jobDetailContent">
                <div class="job-detail-loading">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>正在加载岗位详情...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>正在加载职位数据...</p>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="scripts/jh_dashboard.js"></script>
</body>
</html> 